<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环精灵图</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul,li{
        list-style: none;/*去掉图片边框和图片底侧的空白缝隙*/
    }
    .sprite{
        width: 250px;
        margin: 100px auto;
    }
    .sprite li{
        float: left;
        width: 30px;
        height: 30px;
        margin: 15px;
        /* 设置精灵图为背景 */
        background: url(sprite.png) no-repeat;
    }
</style>
<body>
    <!--构造好DOM元素节点-->
    <div class="sprite">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        //精灵图就是图片拼接技术，它就是把多张小图合成一张大图，
        //通过css中的background-position属性，显示精灵图中的某一个小图标。
        //1 获取所有的li 
        var lis =document.querySelectorAll('li')
        for(var i = 0; i< lis.length;i++){
            //让索引号 乘以 44 就是每个li的背景y坐标 index就是我们的y坐标
            var index = i*44
            lis[i].style.backgroundPosition ='0-'+ index +'px'
        }
    </script>
</body>
</html>